import React, { Component } from 'react';
import {connect} from 'react-redux'
import { Table, Tooltip, Tag, Popconfirm, message } from 'antd';

// 引入自定义组件
import UploadEvi from './components/UploadEvi';

// 引入自定义操作
import { 
  ChangeTasksActivate, 
  GetWorkerTasksSaga, 
  ChangeWorkerTaskSaga,
  GiveUpWorkerTaskSaga 
} from '../../redux/actions/taskWorkerManagePage';


const data = []
for (let i = 0; i < 100; i++) {
    data.push({
    key: i,
    tasktitle: 'John Brown',
    bounty: 32,
    enddate: '2022-03-31',
    task_res: ['0'],
    // task_env: '上传',
    email: '1123@qq.com',
    taskintro: '做后台'
    })
}
  

class TaskWorkerManagePage extends Component {

  // 用于记录每一行的信息
    constructor(props){
      super(props)
      this.state = {
        // 用来传递点击当行的数据
        data: {}
      }
    }

    componentDidMount(){
      console.log("请求后端获得数据")
      // 带email和username去后端验证
      const { email, username } = this.props.baseUserInfoState
      const obj = {email: email, username: username}
      this.props.GetWorkerTasksSaga(obj)
    }

    // 用户任务状态的点击触发函数
    onConfirmRes = () => {
      console.log("onConfirmRes is ", this.state.data)
      const resData = this.state.data
      if (resData.task_res[0] == '1'){
        message.warning("现任务状态为：开发中，无法再切换")
      } else if (resData.task_res[0] == '2') {
        message.warning("现任务状态为：已完成，无法再切换")
      } else {
        this.props.ChangeWorkerTaskSaga(resData)
      }
    }

    // 用户放弃任务点击触发的函数
    onConfirmTitle = () => {
      console.log("onConfirmTitle is ", this.state.data)
      const resData = this.state.data
      if (resData.task_res[0] == '2') {
        message.warning("任务已完成，无法放弃")
      } else {
        this.props.GiveUpWorkerTaskSaga(resData)
      }
    }

    render() {
      const columns = [
        {
          title: '任务标题',
          dataIndex: 'tasktitle',
          key: 'tasktitle',
          width: 150,
          render: (text, record, index) => (
            <Popconfirm
              title="删除放弃该任务？"
              onConfirm={this.onConfirmTitle} // 点击确认的函数
              okText="放弃"
              cancelText="取消"
            >
              <a
               onClick={()=>{
                // 点击向state传递数据
                this.setState({
                  data: {...record}
                })
              }}>{text}</a>
            </Popconfirm> 
            ),
        },
        {
          title: '任务赏金',
          dataIndex: 'bounty',
          key: 'bounty',
          width: 100,
        },
        {
          title: '任务截止时间',
          dataIndex: 'enddate',
          key: 'enddate',
        },
        {
          title: '任务类型',
          dataIndex: 'type_name',
          key: 'key',
          filters: [
            {
              text: '软件开发',
              value: '软件开发',
            },
            {
              text: '算法',
              value: '算法',
            },
            {
              text: '人工智能',
              value: '人工智能',
            },
            {
              text: '大数据',
              value: '大数据',
            },
          ],
          // indexOf是强类型判断
          onFilter: (value, record) => record.type_name.indexOf(value) === 0,
        },
        {
          title: '任务完成状态',
          key: 'task_res',
          dataIndex: 'task_res',
          filters: [
            {
              text: '已完成',
              value: 2,
            },
            {
              text: '开发中',
              value: 1,
            },
            {
              text: '未开始',
              value: 0,
            },
          ],
          // indexOf是强类型判断
          onFilter: (value, record) => record.task_res.indexOf(value) === 0,
          // render可以带入参数(当前行的值，当前行数据，行索引)
          render: (tags, record, index) => (
            <Popconfirm
              title="是否切换为< 开发中 >状态？一经切换无法撤回"
              onConfirm={this.onConfirmRes} // 点击确认的函数
              okText="确认切换"
              cancelText="不切换"
            >
              <span style={{"cursor": "pointer"}} onClick={()=>{
                // 点击向state传递数据
                this.setState({
                  data: {...record}
                })
              }}>
                {tags.map(tag => {
                  let color = 'green';
                  let item_value = '已完成'
                  if (tag == '0') {
                    color = 'volcano';
                    item_value = '未开始'
                  } else if(tag == '1') {
                      color = 'geekblue'
                      item_value = '开发中'
                  } else if(tag == '2') {
                      color = 'green';
                      item_value = '已完成'
                  }
                  return (
                    <Tag color={color} key={tag}>
                      { item_value }
                    </Tag>
                  );
                })}
              </span>
            </Popconfirm>
            ),
        },
        {
          title: '任务作证材料',
          key: 'task_evi',
          dataIndex: 'task_evi',
          render: (text, record, index)=>(<UploadEvi value_data={record} task_evi={text} />)
        },
        {
          title: '联系方式',
          key: 'email',
          dataIndex: 'email',
        },
        {
          title: '任务描述',
          key: 'taskintro',
          dataIndex: 'taskintro',
          ellipsis: {
              showTitle: false,
          },
          render: taskintro => (
              <Tooltip placement='topLeft' title={taskintro}>
                  {taskintro}
              </Tooltip>
          )
        },
      ];
      const { task_data } = this.props.TaskWMPState
      return (
          <Table columns={columns} dataSource={task_data}  scroll={{ y: 557 }} />
      )
    }
}

export default connect(
    state => ({
      baseUserInfoState: state.PublicReducer.baseUserInfo,
      TaskWMPState: state.TaskWorkerManagePageReducer.tasks,
    }),
    {
      ChangeTasksActivate,
      GetWorkerTasksSaga,
      ChangeWorkerTaskSaga,
      GiveUpWorkerTaskSaga,
    }
)(TaskWorkerManagePage)